<template>
  <div class="bg" :style="imgStyle1">
    <div class="Firstindexcontent">
      <div class="head" :style="imgStyle">
        <p>{{ dateFormat(date) }}</p>
        <div class="Readhead-search">
          <ul>
            <li v-if="resourceId.indexOf('002001') > -1">
              <router-link
                :to="{ name: 'Permission', query: { Student: true } }"
                >用户管理</router-link
              >
            </li>
            <li v-if="resourceId.indexOf('002002') > -1">
              <router-link
                :to="{ name: 'Permission', query: { DStudent: true } }"
                >激活用户</router-link
              >
            </li>
          </ul>
        </div>
      </div>
      <div class="count">
        <!-- 平台简介和用户的学习概览 -->
        <div class="left">
          <div class="station">
            <span class="jianjie">平台简介</span>
            <div class="nei">
              作为第一款国产的开源项目管理软件，其核心管理思想是基于敏捷方法SCRUM，内置了学习管理和项目管理，同时又根据国内研发现状补充了测试管理、文档管理等功能；
            </div>
          </div>
          <div class="user">
            <div class="user-header">
              <ul>
                <li>
                  <el-avatar :src="imageUrl"></el-avatar>
                </li>
                <li>
                  <span
                    class="hello"
                    v-if="
                      (grt =
                        ho < 9
                          ? '早上好'
                          : ho < 12
                          ? '上午好'
                          : ho < 15
                          ? '中午好'
                          : ho < 19
                          ? '下午好'
                          : '晚上好')
                    "
                  >
                    {{ userformation[0].username }}~{{ grt }}</span
                  >
                </li>
              </ul>
            </div>
            <div class="user-content">
              <h4>学情概览</h4>
              <ul>
                <li>
                  已完成关卡
                  <p>{{ academic.completeCount }}</p>
                  <router-link :to="{ name: 'Levelstatistics' }">
                    <i class="el-icon-thumb"></i
                  ></router-link>
                </li>
                <li>
                  未完成关卡
                  <p>{{ academic.incompleteCount }}</p>
                  <router-link :to="{ name: 'Levelstatistics' }">
                    <i class="el-icon-thumb"></i
                  ></router-link>
                </li>
                <li>
                  我的延期
                  <p>{{ academic.postponeCount }}</p>
                  <router-link :to="{ name: 'Levelstatistics' }">
                    <i class="el-icon-thumb"></i
                  ></router-link>
                </li>
                <li>
                  我的预期
                  <p>{{ academic.overdueCount }}</p>
                  <router-link :to="{ name: 'Levelstatistics' }">
                    <i class="el-icon-thumb"></i
                  ></router-link>
                </li>
                <li>
                  我的项目
                  <p>{{ academic.projectCount }}</p>
                  <router-link :to="{ name: 'UserProgram' }">
                    <i class="el-icon-thumb"></i
                  ></router-link>
                </li>
                <li>
                  我的通知
                  <router-link
                    :to="{
                      name: 'FirstindexForm',
                      query: { informdatas: informdatas },
                    }"
                  >
                    <i class="el-icon-thumb"></i>
                  </router-link>
                  <p>{{ academic.messageCount }}</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 关卡概览 -->
        <div class="Guanqia">
          <div class="GuanqiaLeft">
            <h4>关卡概览</h4>
            <h5>学习进度情况</h5>
            <ul class="subject">
              <li>方向：{{ userformation[1] }}</li>
              <li>
                阶段：
                <el-select v-model="stategname" placeholder="请选择">
                  <el-option
                    v-for="item in stages"
                    :key="item.stageId"
                    :label="item.name"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
                <span @click="Looking">查看 <i class="el-icon-right"></i></span>
              </li>
              <li>当前关卡：{{ itemName }}</li>
            </ul>
          </div>
          <div class="GuanqiaRight">
            <div class="progress">
              <div class="progressLeft">
                <p>当前阶段时长完成占比</p>
                <el-progress
                  :percentage="customspass.stageCompleteTimePercent"
                  :color="
                    customspass.stageCompleteTimePercent === 100
                      ? customColor.color
                      : customColorF.color
                  "
                  :stroke-width="10"
                ></el-progress>
              </div>
              <div class="progressRight">
                <p>当前阶段总时长 ({{ customspass.stageTotalTime }})</p>
                <p>当前阶段完成时长 ({{ customspass.stageCompleteTime }})</p>
              </div>
            </div>
            <div class="progress">
              <div class="progressLeft">
                <p>当前阶段关卡数量完成占比</p>
                <el-progress
                  :percentage="customspass.stageCompleteCountPercent"
                  :color="
                    customspass.stageCompleteCountPercent === 100
                      ? customColor.color
                      : customColorF.color
                  "
                  :stroke-width="10"
                ></el-progress>
              </div>
              <div class="progressRight">
                <p>当前阶段总关卡数 ({{ customspass.stageTotalCount }})</p>
                <p>当前阶段完成关卡数({{ customspass.stageCompleteCount }})</p>
              </div>
            </div>
            <div class="progress">
              <div class="progressLeft">
                <p>关卡完成时长占比</p>
                <el-progress
                  :percentage="customspass.customspassCompleteTimePercent"
                  :color="
                    customspass.customspassCompleteTimePercent === 100
                      ? customColor.color
                      : customColorF.color
                  "
                  :stroke-width="10"
                ></el-progress>
              </div>
              <div class="progressRight">
                <p>总关卡时长 ({{ customspass.customspassTotalTime }})</p>
                <p>完成关卡时长 ({{ customspass.customspassCompleteTime }})</p>
              </div>
            </div>
            <div class="progress">
              <div class="progressLeft">
                <p>关卡完成数量占比</p>
                <el-progress
                  :percentage="customspass.customspassCompleteCountPercent"
                  :color="
                    customspass.customspassCompleteCountPercent === 100
                      ? customColor.color
                      : customColorF.color
                  "
                  :stroke-width="10"
                ></el-progress>
              </div>
              <div class="progressRight">
                <p>总关卡总数 ({{ customspass.customspassTotalCount }})</p>
                <p>完成关卡数 ({{ customspass.customspassCompleteCount }})</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 项目概览 -->
        <div class="Project">
          <div class="ProjectLeft">
            <h4>项目概览</h4>
            <ul class="ProjectLeftUl">
              <li v-for="(item, index) in projectItems" :key="index">
                {{ item.name }}
                <span @click="LoogingItem(item)"
                  >查看 <i class="el-icon-right"></i
                ></span>
              </li>
            </ul>
          </div>
          <div class="ProjectRight">
            <div class="left">
              <div style="color: rgb(99, 97, 97)">所有项目</div>
              <div class="counts">{{ projectCount.projectCount }}</div>
              <div class="lookbtn">
                <router-link :to="{ name: 'UserProgram' }">
                  查看所有</router-link
                ><i class="el-icon-right"></i>
              </div>
            </div>
            <div class="rights" id="Chart"></div>
          </div>
        </div>
        <!-- 这里是右边部分 -->
        <div class="right">
          <!-- 日志部分 -->
          <div class="journal">
            <h5>最新动态</h5>
            <ul>
              <li v-for="(item, index) in journal" :key="index">
                <span class="time">{{ item.date }}</span>
                <i
                  :style="{ backgroundColor: index == 0 ? 'green' : 'gray' }"
                ></i>
                <span>{{ item.username }} {{ item.operator }}</span>
              </li>
            </ul>
          </div>
          <!-- 预留区域 -->
          <!-- <div class="at">预留区域</div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "@/assets/css/Firstindex.css";
import { mapState } from "vuex";
import axios from "axios";
//按需引入echarts
const echarts = require("echarts");
export default {
  name: "Firstindex",
  data() {
    return {
      imageUrl: "",
      //用户权限
      resourceId: [],
      projectResource: [],
      //问候语
      grt: "",
      ho: new Date().getHours(),
      //背景图片
      imgStyle: {
        backgroundImage: `url(${require("@/assets/images/count.png")})`,
      },
      imgStyle1: {
        backgroundImage: `url(${require("@/assets/images/bgc.png")})`,
      },
      //展示系统时间
      date: new Date(),
      //学情概览
      academic: "",
      //日志信息
      journal: "",
      //通知数据
      infors: "",
      informdatas: [
        {
          time: "2022/03/05 12:11",
          username: "卿艾迪",
          inform: "今天晚上开会哈",
          status: 1,
        },
        {
          time: "2022/03/05 12:11",
          username: "曾召雪",
          inform: "今天晚上开会哈",
          status: 1,
        },
        {
          time: "2022/03/05 12:11",
          username: "曾召雪",
          inform: "今天晚上开会哈",
          status: 2,
        },
        {
          time: "2022/03/05 12:11",
          username: "曾召雪",
          inform: "今天晚上开会哈",
          status: 2,
        },
        {
          time: "2022/03/05 12:11",
          username: "曾召雪",
          inform: "今天晚上开会哈",
          status: 2,
        },
        {
          time: "2022/03/05 12:11",
          username: "曾召雪",
          inform: "今天晚上开会哈",
          status: 2,
        },
        {
          time: "2022/03/05 12:11",
          username: "曾召雪",
          inform: "今天晚上开会哈",
          status: 2,
        },
        {
          time: "2022/03/05 12:11",
          username: "卿艾迪",
          inform: "今天晚上开会哈",
          status: 2,
        },
        {
          time: "2022/03/05 12:11",
          username: "卿艾迪",
          inform: "今天晚上开会哈",
          status: 1,
        },
        {
          time: "2022/03/04 12:11",
          username: "卿艾迪",
          inform: "今天晚上开会哈",
          status: 1,
        },
        {
          time: "2022/03/05 12:11",
          username: "卿艾迪",
          inform: "今天晚上开会哈",
          status: 2,
        },
        {
          time: "2022/03/05 12:11",
          username: "卿艾迪",
          inform: "今天晚上开会哈",
          status: 1,
        },
        {
          time: "2022/03/05 12:11",
          username: "卿艾迪",
          inform: "今天晚上开会哈",
          status: 1,
        },
        {
          time: "2022/03/05 12:11",
          username: "曾召雪",
          inform: "今天晚上开会哈",
          status: 2,
        },
        {
          time: "2022/03/05 12:11",
          username: "卿艾迪",
          inform: "今天晚上开会哈",
          status: 1,
        },
        {
          time: "2022/03/05 12:11",
          username: "卿艾迪",
          inform: "今天晚上开会哈",
          status: 1,
        },
        {
          time: "2022/03/05 12:11",
          username: "卿艾迪",
          inform: "今天晚上开会哈",
          status: 2,
        },
        {
          time: "2022/03/05 12:11",
          username: "卿艾迪",
          inform: "今天晚上开会哈",
          status: 1,
        },
        {
          time: "2022/03/05 12:11",
          username: "卿艾迪",
          inform: "今天晚上开会哈",
          status: 1,
        },
        {
          time: "2022/03/05 12:11",
          username: "卿艾迪",
          inform: "今天晚上开会哈",
          status: 2,
        },
        {
          time: "2022/03/05 12:11",
          username: "卿艾迪",
          inform: "今天晚上开会哈",
          status: 1,
        },
        {
          time: "2022/03/05 12:11",
          username: "卿艾迪",
          inform: "今天晚上开会哈",
          status: 1,
        },
      ],
      //关卡概览进度条
      customColor: { color: "rgb(91, 207, 71)" },
      customColorF: { color: "rgb(37, 85, 206)" },
      customspass: "",
      //当前学科下面的所有阶段
      stages: "",
      stategname: "",
      //正在关卡的名字
      itemName: "",
      //项目概览
      projectItems: [],
      projectCount: "",
      Charts: [],
    };
  },
  watch: {
    stategname: {
      handler(New, Old) {
        let id = this.$store.state.LoginData.userformation[0].id;
        /* 关卡概览 */
        this.$http({
          method: "post",
          url: `customspassOverview/select?userId=${id}&stageName=${encodeURIComponent(
            this.stategname
          )}`,
        }).then(({ data }) => {
          if (data.flag) {
            this.customspass = data.data;
          } else {
            // console.log(response.data);
          }
        });
      },
    },
  },
  computed: {
    ...mapState("LoginData", ["userformation"]),
  },
  methods: {
    /* 点击阶段到具体的阶段 */
    Looking() {
      this.stages.forEach((item, index) => {
        if (this.stategname === item.name) {
          this.$router.push({
            name: "Subject",
            query: {
              stategname: this.stategname,
              stategnameindex: index,
            },
          });
        }
      });
    },
    //项目统计图
    initCharts(data) {
      let Charts = [
        data.goingProjectCount,
        data.completeProjectCount,
        data.notStartProjectCount,
      ];

      let ItemmyChart = echarts.init(document.getElementById("Chart"));
      //绘制图表
      ItemmyChart.setOption({
        tooltip: {
          trigger: "axis",
        },

        xAxis: [
          {
            type: "category",
            data: ["进行中", "已完成", "未开始"],
          },
        ],
        yAxis: [
          {
            type: "value",
            show: false,
            splitLine: {
              //网格线
              show: false,
            },
          },
        ],
        series: [
          {
            name: "count",
            barWidth: "25%",
            type: "bar",
            data: Charts,
            label: {
              show: true,
              formatter: Charts,
              position: "top",
            },
            itemStyle: {
              borderRadius: [20, 20, 0, 0],
            },
          },
        ],
      });
    },
    //查看某个项目
    LoogingItem(projects) {
      //选择的当前项目
      this.$store.commit("UserStory/ITEM", projects);
      this.$router.push({
        name: "Items",
      });
    },
    // 时间格式化
    dateFormat() {
      var date = new Date();
      var year = date.getFullYear();
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      let week = date.getDay(); // 星期
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      // 拼接 时间格式处理
      return (
        year +
        "年" +
        month +
        "月" +
        day +
        "日 " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds +
        " " +
        weekArr[week]
      );
    },
  },
  mounted() {
    let username = this.$store.state.LoginData.userformation[0].username;
    let id = this.$store.state.LoginData.userformation[0].id;
    let project = this.$store.state.LoginData.userformation[1];
    this.LookResrouceB(id);
    /* 头像 */
    this.$bus.$on("avatar", (data) => {
      this.imageUrl = data;
    });

    // 页面挂载判断是否有头像
    // if (
    //   this.$store.state.LoginData.userformation[0].url != null ||
    //   localStorage.getItem("userAvatar")
    // ) {
    //   if (localStorage.getItem("userAvatar")) {
    //     this.imageUrl = localStorage.getItem("userAvatar");
    //   } else {
    //     this.imageUrl =
    //       "http://" + this.$store.state.LoginData.userformation[0].url;
    //   }
    // } else {
      this.imageUrl =
        "http://raexshntn.hn-bkt.clouddn.com/8483ceee-402d-4d9d-82f8-98ac2737c3d8";
    // }
    /* 学情概览 */
    this.$http({
      method: "post",
      url: `studyOverview/count?userId=${id}`,
    }).then(({ data }) => {
      if (data.flag) {
        this.academic = data.data;
      }
    });
    /* 项目概览图 */
    this.$http({
      method: "post",
      url: `project/selectProjectsByUserId?userId=${id}`,
    }).then(({ data }) => {
      if (data.flag) {
        let obj = data.data;
        for (let key in obj) {
          let objs = {};
          objs.id = key;
          objs.name = obj[key];
          this.projectItems.push(objs);
        }
      }
    });
    this.$http({
      method: "post",
      url: `project/selectProjectOverview?userId=${id}`,
    }).then(({ data }) => {
      if (data.flag) {
        console.log(data.data);
        this.projectCount = data.data;
        this.initCharts(data.data);
      }else{
         console.log(data);
      }
    });
    /* 接受正在学习的关卡 */
    this.$http({
      method: "post",
      url: `customspass/selectStudyCustomspassByUsernameAndSubjectName?username=${username}&subjectName=${project}`,
    }).then(({ data }) => {
      if (data.flag) {
        let subject = data.data;
        subject.forEach((item, index) => {
          if (
            item.status == "3" ||
            item.status == "4" ||
            item.status == "5" ||
            item.status == "2"
          ) {
            this.itemName = item.customspassName || "暂无关卡学习";
            this.stategname = item.stageName || "暂无阶段学习";
          }
        });
      } else {
        console.log(data);
      }
    });

    /* 获取当前系统时间 */
    let _this = this;
    this.timer = setInterval(() => {
      _this.date = new Date().toLocaleString();
    }, 1000);
    /* 根据当前学科查询阶段 */
    axios({
      method: "post",
      headers: {
        "content-type": "application/x-www-form-urlencodedt",
      },
      url: `http://124.71.219.15:8083/management_system/stage/selectStageAllBySubjectName?subjectName=${this.userformation[1]}`,
    }).then((response) => {
      if (response.data.flag) {
        this.stages = response.data.data;
        this.stategname = this.stages[0].name;
      }
    });
    /* 日志 */
    this.$http({
      method: "post",
      url: `log/selectLog?userId=${id}`,
    }).then(({ data }) => {
      if (data.flag) {
        this.journal = data.data;
      }
    });
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.el-select-dropdown__item {
  padding: 0 20px;
}
.el-select-dropdown__item:hover {
  background-color: skyblue;
}
.selectsubject option {
  background-color: pink;
}
</style>